<template>
    <div class="sjzxLeftHistoryFire">
        <div class="listTitle">历史火情监测统计分析</div>
        <Title titles="火情市县统计" />
        <div id="historyFireChart1"></div>
        <Title titles="火情强度统计" />
        <div id="historyFireChart2"></div>

        <Title titles="火情树种类型统计" />
        <div id="historyFireChart3"></div>

        <Title titles="火情植被类型统计" />
        <div id="historyFireChart4"></div>
    </div>
</template>

<script>
import { onMounted, ref } from "vue";
import Title from "../LittleTitle.vue";
import echarts from "echarts";
export default {
    components: {
        Title,
    },
    setup() {
        let inputValue = ref("");
        let currentPage = ref(1);
        let dataList = ref([
            {
                order: "1",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "2",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "3",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "4",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "5",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "6",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "7",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "8",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "9",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
            {
                order: "10",
                name: "海府路加气站",
                link: "朱凯62550870",
                address: "海口市还富路152号",
            },
        ]);
        const drawChart1 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "19%",
                    bottom: "50%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:起",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    interval: 1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        const drawChart2 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "22%",
                    bottom: "18%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:起",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        const drawChart3 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "23%",
                    bottom: "40%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:起",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    interval: 2000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        const drawChart4 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "19%",
                    bottom: "50%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:起",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };

        onMounted(() => {
            let arr = [
                {
                    name: "三亚市",
                    num: 1470,
                },
                {
                    name: "乐东黎族自治县",
                    num: 2814,
                },
                {
                    name: "万宁市",
                    num: 1882,
                },
                {
                    name: "白沙黎族自治县",
                    num: 2749,
                },
                {
                    name: "儋州市",
                    num: 1605,
                },
                {
                    name: "东方市",
                    num: 2249,
                },
                {
                    name: "文昌市",
                    num: 789,
                },
                {
                    name: "定安县",
                    num: 830,
                },
                {
                    name: "保亭黎族苗族自治县",
                    num: 1198,
                },
                {
                    name: "五指山市",
                    num: 2339,
                },
                {
                    name: "海口市",
                    num: 784,
                },
                {
                    name: "澄迈县",
                    num: 1024,
                },
                {
                    name: "陵水黎族自治县",
                    num: 665,
                },
                {
                    name: "琼海市",
                    num: 1245,
                },
                {
                    name: "琼中黎族苗族自治县",
                    num: 3082,
                },
                {
                    name: "屯昌县",
                    num: 994,
                },
                {
                    name: "临高县",
                    num: 847,
                },
                {
                    name: "昌江黎族自治县",
                    num: 2168,
                },
            ];
            let arr1 = [
                {
                    name: "0",
                    num: 1552,
                },
                {
                    name: "1",
                    num: 2130,
                },
                {
                    name: "2",
                    num: 16662,
                },
                {
                    name: "3",
                    num: 8012,
                },
                {
                    name: "4",
                    num: 250,
                },
                {
                    name: "5",
                    num: 76,
                },
                {
                    name: "6",
                    num: 7,
                },
                {
                    name: "7",
                    num: 4,
                },
                {
                    name: "8",
                    num: 4,
                },
                {
                    name: "9",
                    num: 4,
                },
                {
                    name: "10",
                    num: 1,
                },
                {
                    name: "11",
                    num: 1,
                },
            ];
            let arr2 = [
                {
                    name: "相思类",
                    num: 1212,
                },
                {
                    name: "芒果",
                    num: 547,
                },
                {
                    name: "天然阔",
                    num: 1144,
                },
                {
                    name: "其他阔叶类",
                    num: 437,
                },
                {
                    name: "橡胶",
                    num: 6677,
                },
                {
                    name: "其他经济林",
                    num: 42,
                },
                {
                    name: "果树类",
                    num: 2130,
                },
                {
                    name: "杉木",
                    num: 76,
                },
                {
                    name: "松类",
                    num: 808,
                },
                {
                    name: "其他阔",
                    num: 190,
                },
                {
                    name: "天然阔叶",
                    num: 7306,
                },
                {
                    name: "椰子",
                    num: 108,
                },
                {
                    name: "竹类",
                    num: 97,
                },
                {
                    name: "灌木林",
                    num: 56,
                },
                {
                    name: "木麻黄",
                    num: 583,
                },
                {
                    name: "桉树类",
                    num: 1506,
                },
                {
                    name: "红树林",
                    num: 6,
                },
            ];
            let arr3 = [
                {
                    name: "森林",
                    num: 16220,
                },
                {
                    name: "农田及自然植被",
                    num: 7919,
                },
                {
                    name: "草地",
                    num: 4627,
                },
                {
                    name: "城市或荒漠",
                    num: 1,
                },
            ];
            let xData1 = arr.map((item) => {
                return item.name;
            });
            let yData1 = arr.map((item) => {
                return item.num;
            });

            let xData2 = arr1.map((item) => {
                return item.name;
            });
            let yData2 = arr1.map((item) => {
                return item.num;
            });

            let xData3 = arr2.map((item) => {
                return item.name;
            });
            let yData3 = arr2.map((item) => {
                return item.num;
            });

            let xData4 = arr3.map((item) => {
                return item.name;
            });
            let yData4 = arr3.map((item) => {
                return item.num;
            });

            drawChart1("historyFireChart1", xData1, yData1);
            drawChart2("historyFireChart2", xData2, yData2);
            drawChart3("historyFireChart3", xData3, yData3);
            drawChart4("historyFireChart4", xData4, yData4);
        });
        return {
            inputValue,
            currentPage,
            dataList,
        };
    },
};
</script>
<style scoped>
.dataList::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.dataList::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.dataList::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
</style>
<style>
.sjzxLeftHistoryFire .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    color: #000;
}
</style>
<style lang="stylus" >
.sjzxLeftHistoryFire {
    color: #fff;
    width: vw(400);
    padding: vh(15) vw(15);

    .listTitle {
        width: 100%;
        height: vh(40);
        line-height: vh(40);
        font-size: vw(16);
        text-align: center;
        margin-bottom: vh(10);
    }

    .resultNum {
        margin-top: vh(10);
        margin-bottom: vh(10);
    }

    .exportExcel {
        width: vw(100);
        height: vh(30);
        line-height: vh(30);
        border: 1px solid #00EAFF;
        text-align: center;
        border-radius: 3px;
        float: right;
        margin-top: vh(10);
    }

    .el-input__inner {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    .el-input-group__append, .el-input-group__prepend {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    #historyFireChart1 {
        width: vw(370);
        height: vh(220);
        margin-bottom: vh(15);
    }

    #historyFireChart2 {
        width: vw(370);
        height: vh(170);
        margin-bottom: vh(15);
    }

    #historyFireChart3 {
        width: vw(370);
        height: vh(170);
        margin-bottom: vh(15);
    }

    #historyFireChart4 {
        width: vw(370);
        height: vh(200);
    }

    .dataList {
        height: vh(640);
        overflow-y: scroll;
        margin-bottom: vh(20);

        .dataListItem {
            padding-bottom: vh(10);
            padding-top: vh(10);
            border-bottom: 1px solid #ddd;

            .itemTop {
                .order {
                    display: inline-block;
                    min-width: vw(20);
                    height: vh(20);
                    margin-right: vw(10);
                    text-align: center;
                    background: #00EAFF;
                    font-size: vw(16);
                    line-height: vh(20);
                }

                .itemName {
                    font-size: vw(16);
                    height: vh(20);
                    line-height: vh(20);
                }
            }

            .link {
                .linkPro {
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .linkContent {
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }

            .itemBottom {
                .locationIcon {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .location {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }
        }
    }
}
</style>